<template>
  <div style="margin-bottom:50px;">
    <!-- 头部 -->
    <mt-header title="商品列表">
      <div slot="left">
        <mt-button @click="goBack" icon="back">返回</mt-button>
      </div>
    </mt-header>
    <!-- 选项卡 -->
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">默认</mt-tab-item>
      <mt-tab-item id="2">价格</mt-tab-item>
      <mt-tab-item id="3">销量</mt-tab-item>
    </mt-navbar>
    <!-- tab-container -->
    <mt-tab-container v-model="selected">
      <mt-tab-container-item :id="sId">
        <ul class="mui-table-view">
          <li class="mui-table-view-cell mui-media" v-for="item in list">
            <router-link to="" @click.native="jiazai">
              <img class="mui-media-object mui-pull-left" :src="item.imgUrl">
              <div class="mui-media-body">
                {{item.title}}
                <p class='mui-ellipsis'>{{item.score}}积分</p>
              </div>
            </router-link>
          </li>
        </ul>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
import { Navbar, TabItem } from 'mint-ui';
import { Indicator } from 'mint-ui';
export default {
  data(){
    return{
      selected:'1',
      list:[],
      sId:"1"
    }
  },
  created(){
    this.getList();
  },
  watch:{
    selected(){
      this.getList();
    }
  },
  methods:{
    goBack(){
       this.$router.go(-1);
     },
     jiazai(){
       Indicator.open('加载中...')
       setTimeout(()=>{
         Indicator.close();
         this.$router.push('/detail')
       },300)},
     getList(){
       if(this.selected==1){
         this.sId="1"
        this.list=[
          {
            id:0,
            title:"科顺煮蛋器 多功能",
            score:2800,
            imgUrl:require('../../assets/img/dianqi.jpg')
          },
          {
            id:1,
            title:"小熊（Bear）单双层多能能",
            score:5000,
            imgUrl:require('../../assets/img/list1.jpg')
          },
            {
            id:2,
            title:"小熊（Bear）ZDQ-206煮蛋器",
            score:3700,
            imgUrl:require('../../assets/img/list2.jpg')
          },
          {
            id:3,
            title:"九阳（Jyoung）煮蛋器多功能只能蒸蛋",
            score:4700,
            imgUrl:require('../../assets/img/list3.jpg')
          }
        ]
       }else if(this.selected==2){
         this.sId="2"
        this.list=[
          {
            id:2,
            title:"小熊（Bear）ZDQ-206煮蛋器",
            score:3700,
            imgUrl:require('../../assets/img/list2.jpg')
          },
          {
            id:3,
            title:"九阳（Jyoung）煮蛋器多功能只能蒸蛋",
            score:4700,
            imgUrl:require('../../assets/img/list3.jpg')
          }
        ]
       }else{
         this.sId="3"
        this.list=[
            {
            id:1,
            title:"小熊（Bear）单双层多能能",
            score:5000,
            imgUrl:require('../../assets/img/list1.jpg')
          }
        ]
       }
     }
  }
}
</script>
<style scoped>
 .mui-table-view .mui-media-object{
   height: 90px;
   max-width: 90px;
 }
 .mui-table-view-cell p{
   margin-top: 10px;
   color: red;
 }
 .mui-table-view{
   margin-top: 4px;
 }
 .mui-table-view-cell > a:not(.mui-btn).mui-active{
   background-color: #fff;
 }
</style>


